<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <h1>现在的n值是{{n}}</h1>
       <button @click ='add' >点我n加一</button>
       <button @click="bye">点击我销毁实例</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    // debugger;
    const vm = new Vue({
        el:'#root',
        data:{
           n:1
        },
        methods:{
            add(){
                this.n++
            },
            bye(){
                // 销毁实例
                this.$destroy()
            }
        },
        // 在代码中输入debugger;可以让代码卡在这里
        
        // 创建数据代理，数据检测之前，vm之前就创好了，此时无法访问data的数据和methods的方法
        beforeCreate(){
            console.log('beforeCreate')
        },
        // 此时可以访问data的数据和methods的方法
        created(){
            console.log('created')
        },
        // 此时页面展现未经编译的dom，所有dom操作最终都不生效
        beforeMount(){
            console.log('beforeMount')
            // debugger;
        },
        // 页面已经挂载完毕,页面呈现被编译的dom，对dom操作生效（但是vue尽量别），开定时器，发送请求绑定自定义事件等初始化一般在这里设置
        mounted(){
            console.log('mounted')
        },
        // 数据是新的，但页面还是旧的，页面尚未和数据同步
        beforeUpdate(){
            console.log('beforeUpdate')
        },
        // 此时数据跟页面都是新的，页面和数据已经同步了
        updated(){
            console.log('updated')
        },
        // 销毁vue实例之前，此时数据，函数，指令都是可以用的，但是所有对数据的修改是不行的，马上要执行销毁过程，一般在这时候关闭定时器，解除绑定事件，取消订阅消息等等。
        beforeDestroy(){
            console.log('beforeDestory')
        },
        // 销毁实例后,销毁了变成普通页面了
        destroyed(){
            console.log('destoryed')
        }
        // mounted和beforeDestroy是重要钩子，用的很多
    })
</script>
</html>